<template>
  <div class="demo-app">
    <el-alert style="margin-top: 20px;" center :title="title" type="info" :closable="false"></el-alert>
    <el-row style="margin-top: 20px;">
      <el-col :span="2" :offset="1" style="
    margin-top: 4px;
">项目名称:</el-col>
      <el-col :span="19">
        <el-input v-model="projectName" placeholder="请输入" />
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="2" :offset="1" style="
    margin-top: 4px;
">项目状态:</el-col>
      <el-col :span="8">
        <el-select v-model="projectStatus" placeholder="请选择">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="2" :offset="1" style="
    margin-top: 4px;
">立项状态:</el-col>
      <el-col :span="8">
        <el-select v-model="isPre" placeholder="请选择">
          <el-option
            v-for="item in isPreOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="2" :offset="1" style="
    margin-top: 4px;
">考核工作量:</el-col>
      <el-col :span="8">
        <el-input v-model="finalWorkload" placeholder="请输入">
          <template slot="append">人日</template>
        </el-input>
      </el-col>
      <el-col :span="2" :offset="1" style="
    margin-top: 4px;
">项目金额:</el-col>
      <el-col :span="8">
        <el-input v-model="projectAmount" placeholder="请输入">
          <template slot="append">元</template>
        </el-input>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="2" :offset="1">备注:</el-col>
      <el-col :span="19">
        <el-input
          type="textarea"
          :autosize="{ minRows: 8, maxRows: 15}"
          placeholder="请输入内容"
          v-model="maintain.memo"
        ></el-input>
      </el-col>
    </el-row>
    <el-alert style="margin-top: 20px;" center title="关联合同" type="success" :closable="false"></el-alert>
    <vxe-toolbar>
      <template #buttons>
        <vxe-button icon="fa fa-plus" @click="insertEvent()">新增</vxe-button>
        <vxe-button icon="fa fa-minus-square-o" @click="$refs.xTable.removeCheckboxRow()">删除</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      border
      show-overflow
      keep-source
      ref="xTable"
      max-height="400"
      :data="contractProjects"
      :edit-config="{trigger: 'click', mode: 'cell', icon: 'fa fa-pencil', showStatus: true}"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="contractId" title="所属合同" :edit-render="{}">
        <template #default="{ row }">
          <span>{{ formatContract(row.contractId)}}</span>
        </template>
        <template #edit="{ row }">
          <!-- <el-select v-model="row.contractId" filterable placeholder="请选择">
            <el-option
              v-for="item in contractOptions"
              :key="item.contractId"
              :value="item.contractId"
              :label="'['+item.code+']'+item.name"
            ></el-option>
          </el-select>-->
          <vxe-select v-model="row.contractId" filterable clearable>
            <vxe-option
              v-for="item in contractOptions"
              :key="item.contractId"
              :value="item.contractId"
              :label="'['+item.code+']'+item.name"
            ></vxe-option>
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column field="memo" title="备注" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.memo" type="text"></vxe-input>
        </template>
      </vxe-column>
    </vxe-table>
    <el-row style="margin-top: 20px;">
      <el-col :span="8" :offset="11">
        <el-button type="primary" @click="success">保存</el-button>
        <el-button type="info" style="
    margin-left: 30px;
" @click="closeView">取消</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import request from "@/utils/request";
import _ from "lodash";
export default {
  components: {},
  created() {
    this.remoteMethod();
  },
  data: function () {
    return {
      tableData: [],
      contractProjects: [],
      contractOptions: [],
      maintain: {
        memo: null,
      },
      title: "维护",
      projectName: null,
      projectCode: null,
      projectAmount: null,
      finalWorkload: null,
      isPre: null,
      isPreOptions: [
        {
          value: 1,
          label: "预立项",
        },
        {
          value: 0,
          label: "立项",
        },
      ],
      projectStatus: null,
      statusOptions: [
        {
          value: "development",
          label: "开发",
        },
        {
          value: "create",
          label: "初验",
        },
        {
          value: "finale",
          label: "终验",
        },
        {
          value: "close",
          label: "关闭",
        },
      ],
      projectId: "",
    };
  },
  methods: {
    formatContract(val) {
      const a = this.contractOptions.find((item) => item.contractId == val);
      return a ? "[" + a.code + "]" + a.name : "";
    },
    async insertEvent(row) {
      const $table = this.$refs.xTable;
      const record = {
        contractId: "",
        memo: "",
      };
      const { row: newRow } = await $table.insertAt(record, row);
      await $table.setActiveCell(newRow);
    },
    remoteMethod() {
      this.projectId = this.$attrs.projectId;
      request({
        url: "/eip/project2/getMaintain",
        method: "get",
        params: { projectId: this.projectId },
      })
        .then((r) => {
          this.maintain = r.maintain;
          this.projectStatus = r.project.projectStatus;
          this.isPre = r.project.isPre;
          this.finalWorkload = r.project.finalWorkload;
          this.projectAmount = r.project.projectAmount;
          this.projectName = r.project.projectName;
          this.projectCode = r.project.projectCode;
          this.title =
            this.projectName + "[" + this.projectCode + "]的维护界面";
          this.contractOptions = r.contractOptions;
          this.contractProjects = r.contractProjects;
        })
        .catch((e) => {
          this.msgError(e || "数据请求失败");
        });
    },
    success() {
      this.$confirm("确定保存吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const $table = this.$refs.xTable;
          const { insertRecords, removeRecords, updateRecords } =
            $table.getRecordset();
          var deleteId = "";
          if (removeRecords.length > 0) {
            for (var i = 0; i < removeRecords.length; i++) {
              deleteId = deleteId + removeRecords[i].id + ",";
            }
          }
          if (updateRecords.length > 0) {
            for (var i = 0; i < updateRecords.length; i++) {
              if (
                updateRecords[i].contractId == "" ||
                updateRecords[i].contractId == null
              ) {
                this.$message.error("所属合同不能为空喔");
                return false;
              }
              deleteId = deleteId + updateRecords[i].id + ",";
              this.tableData.push({
                contractId: updateRecords[i].contractId,
                memo: updateRecords[i].memo,
                projectId: this.projectId,
              });
            }
          }
          if (insertRecords.length > 0) {
            for (var i = 0; i < insertRecords.length; i++) {
              if (
                insertRecords[i].contractId == "" ||
                insertRecords[i].contractId == null
              ) {
                this.$message.error("所属合同不能为空喔");
                return false;
              }
              this.tableData.push({
                contractId: insertRecords[i].contractId,
                memo: insertRecords[i].memo,
                projectId: this.projectId,
              });
            }
          }
          request({
            url: "/eip/project2/saveMaintain",
            method: "post",
            data: {
              project: {
                projectId: this.projectId,
                projectStatus: this.projectStatus,
                isPre: this.isPre,
                finalWorkload: this.finalWorkload,
                projectAmount: this.projectAmount,
                projectName: this.projectName,
              },
              deleteId: deleteId,
              tableData: this.tableData,
              maintain: this.maintain,
            },
          })
            .then((r) => {
              this.$message({
                type: "success",
                message: "保存成功!",
              });
              this.closeView();
              // this.title =
              //   this.projectName + "[" + this.projectCode + "]的维护界面";
            })
            .catch((e) => {
              this.msgError(e || "数据请求失败");
            });
        })
        .catch(() => {});
    },
    closeView() {
      this.$root.closeModal("/eip/project/maintain");
    },
  },
};
</script>

<style lang='css' scoped>
</style>
